<script setup lang="ts">
import { ref } from "vue";

defineProps<{ msg: string }>();

const count = ref(0);
// 1.这时候如果请求出错了，错误的确是会被catch 住，但是 res 也会被赋值 undefined ，后面的代码也会继续被执行，这时候如果后续的逻辑依赖 res 的值，就有可能触发新的报错，比如：
// function req() {
//   return fetch("http://localhost:3000")
//     .then((response) => response.json())
//     .catch((err) => console.error(err));
// }

// async function req2() {
//   const res = await req();
//   console.log(res.data.username); // Cannot read properties of undefined
// }
// req2();
// 2.请求报错的情况下 console.log(res) 那一行 直接就不会被执行，让错误本身去打断后续的代码执行，是 try...catch... 语句的意义所在。
// 我们一般的业务场景经常会将基础请求逻辑封装很多层，如果在对底层的请求方法上catch 住了 报错，
// 会就导致外层的函数没发捕获报错信息。所以即使在有业务需要的场景下，我们要在底层请求上面 catch 错误，（比如数据埋点 等），我们一般也会将错误 往外层抛出，来打断 await 后续的逻辑，

function req() {
  return fetch("http:baidu.com:3000").then((response) => response.json());
}
async function req2() {
  try {
    const res = await req();
    console.log(res.data);
  } catch (err) {
    throw err;
  }
}
</script>

<template>
  <h1>{{ msg }}</h1>
  <button type="button" @click="count++">count is: {{ count }}</button>
</template>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
